<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="Your description goes here" />
	<meta name="keywords" content="your,keywords,goes,here" />
	<meta name="author" content="Your Name" />
	<link rel="stylesheet" type="text/css" href="variant-trio.css" title="Variant Trio" media="screen,projection" />
	<title>Variant Trio v1.0</title>
</head>

<body>
<div id="wrap">
	<h1><a href="index.html">Variant Trio</a></h1>
	<p class="slogan">A two/three column template</p>
		
	<div id="topmenu">
		<p>
		<strong class="hide">Main menu:</strong>
		<a class="active" href="index.html">Home</a><span class="hide"> | </span>
		<a href="index.html">Page 2</a><span class="hide"> | </span>
		<a href="index.html">Page 3</a><span class="hide"> | </span>
		<a href="index.html">Page 4</a><span class="hide"> | </span>
		<a href="index.html">Page 5</a>
		</p>
	</div>
	
	<div id="headerimage">
	<img src="header.jpg" width="980" height="200" alt="sample header image" />
	</div>

	<div id="sidebar">
		<ul class="sidemenu">
			<li><a class="active" href="index.html">First side link</a></li>  
			<li><a href="#">Second side link</a></li>
			<li><a href="#">Third side link</a></li>
			<li><a href="#">Subpages</a>
				<ul class="vmenu">
				<li><a  href="index.html">First subpage link</a></li>  
				<li><a href="#">Second page link</a></li>
				</ul></li>
			<li><a href="#">Last side link</a></li>
		</ul>
		
		<h2>Related links</h2>
		<p>For more templates and useful resources, I recommend these pages:</p>
		<ul>
		<li><a href="http://andreasviklund.com/learn/tutorial-building-your-first-website-using-a-free-website-template-part-1/">Template tutorial</a></li>
		<li><a href="http://andreasviklund.com/templates/">More free templates</a></li>  
        <li><a href="http://andreasviklund.com/wordpress-themes/">WordPress themes</a></li>
		<li><a href="http://www.svenskadomaner.se/order.asp?step=1&amp;ling=en&amp;ref=A">Domains and hosting</a></li>
		</ul>
	</div>
	
	<div id="content">
		<div class="full">
		<h2>The Variant Trio template</h2>
		<p>Inspired by the <a href="http://andreasviklund.com/templates/variant-duo/">Variant Duo</a> template, here is <a href="http://andreasviklund.com/templates/variant-trio/">Variant Trio</a>.  It gives you the option to choose between two or three columns with a sidebar menu. This is a completely free template, and it may be used without any limitations or obligations. If you decide to use this template to build a website or a blog/CMS theme, please leave the design credits in the footer.</p>
		</div>

		<div class="left">
			<h3>Sample image</h3>
			<p><img src="sample.jpg" width="355" height="175" alt="sample content image" /></p>
		</div>

		<div class="right">
			<h3>Two or three columns</h3>
			<p>To use two columns, put your main content inside a div with the class name "full". To use three columns, make one div with the class name "left" and another with the class name "right" and then place a hr with the class name "clear" after both divs.</p>
			<p>More templates, as well as articles and tutorials on how to build websites using templates, can be found on <a href="http://andreasviklund.com/">andreasviklund.com</a>.</p>
		</div>

		<hr class="clear" />
	</div>

	<div id="footer">
	<p>Copyright &copy; 2010 <a href="index.html">Your Name</a><br />
	Template design by <a href="http://andreasviklund.com/">Andreas Viklund</a></p>
	</div>

</div>
</body>
</html>
